{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<title>航班信息查询</title>
<link href="{% static 'plugins/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'plugins/bootstrap-dashen.css' %}" rel="stylesheet">
<link href="{% static 'plugins/font-awesome.css' %}" rel="stylesheet">
<link href="{% static 'plugins/animate.css' %}" rel="stylesheet">
<link href="{% static 'plugins/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
</head>
<body style="margin-top:70px;">
<div class="container">
{% include 'header.html' %}
	<div class="col-md-3 wow fadeInLeft">
		<div class="page-header">
    		<h1>航班信息查询</h1>
		</div>
		<form name="flightQueryForm" id="flightQueryForm" action="{% url 'Flight:frontList' %}" class="mar_t15" method="post">
			 {% csrf_token %}
			<div class="form-group">
				<label for="flightNumber">航班号:</label>
				<input type="text" id="flightNumber" name="flightNumber" value="{{ flightNumber }}" class="form-control" placeholder="请输入航班号">
			</div>
            <div class="form-group">
            	<label for="startStation_stationId">始发机场：</label>
                <select id="startStation_stationId" name="startStation.stationId" class="form-control">
                	<option value="0">不限制</option>
                    {% for stationInfo in stationInfos %}
                        {% if stationInfo.stationId == startStation_stationId %}
                             <option value="{{stationInfo.stationId }}" selected>{{ stationInfo.stationName }}</option>
                        {% else %}
                            <option value="{{ stationInfo.stationId }}">{{ stationInfo.stationName }}</option>
                        {% endif %}
	 				{% endfor %}
 			</select>
            </div>
            <div class="form-group">
            	<label for="endStation_stationId">终到机场：</label>
                <select id="endStation_stationId" name="endStation.stationId" class="form-control">
                	<option value="0">不限制</option>
                    {% for stationInfo in stationInfos %}
                        {% if stationInfo.stationId == endStation_stationId %}
                             <option value="{{stationInfo.stationId }}" selected>{{ stationInfo.stationName }}</option>
                        {% else %}
                            <option value="{{ stationInfo.stationId }}">{{ stationInfo.stationName }}</option>
                        {% endif %}
	 				{% endfor %}
 			</select>
            </div>
			<div class="form-group">
				<label for="startTime">起飞时间:</label>
				<input type="text" id="startTime" name="startTime" class="form-control"  placeholder="请选择起飞时间" value="{{ startTime }}" onclick="SelectDate(this,'yyyy-MM-dd')" />
			</div>
			<div class="form-group">
				<label for="endTime">终到时间:</label>
				<input type="text" id="endTime" name="endTime" class="form-control"  placeholder="请选择终到时间" value="{{ endTime }}" onclick="SelectDate(this,'yyyy-MM-dd')" />
			</div>
            <div class="form-group">
            	<label for="seatType_seatTypeId">席别：</label>
                <select id="seatType_seatTypeId" name="seatType.seatTypeId" class="form-control">
                	<option value="0">不限制</option>
                    {% for seatType in seatTypes %}
                        {% if seatType.seatTypeId == seatType_seatTypeId %}
                             <option value="{{seatType.seatTypeId }}" selected>{{ seatType.seatTypeName }}</option>
                        {% else %}
                            <option value="{{ seatType.seatTypeId }}">{{ seatType.seatTypeName }}</option>
                        {% endif %}
	 				{% endfor %}
 			</select>
            </div>
            <input type=hidden name=currentPage value="{{ currentPage }}" />
            <button type="submit" class="btn btn-primary">查询</button>
        </form>
	</div>

	<div class="col-md-9 wow fadeInRight">
		<ul class="breadcrumb">
  			<li><a href="{% url 'Index:index' %}">首页</a></li>
  			<li><a href="{% url 'Flight:frontList' %}">航班信息信息列表</a></li>
  			<li class="active">查询结果显示</li>
  			<a class="pull-right" href="{% url 'Flight:frontAdd' %}" style="display:none;">添加航班信息</a>
		</ul>
		<div class="row">
            {% for flight in flights_page %}
                {% if forloop.counter|add:-1|divisibleby:4 %}
			<div class="col-md-3 bottom15" style="clear: left;">
                {% else %}
            <div class="col-md-3 bottom15">
                {% endif %}
			  <a  href="{% url 'Flight:frontShow' flight.flightId %}"><img class="img-responsive" src="{{ flight.flightPhoto.url }}" /></a>
			     <div class="showFields">
			     	<div class="field">
	            		航班号:{{ flight.flightNumber }}
			     	</div>
			     	<div class="field">
	            		始发机场:{{ flight.startStation.stationName }}
			     	</div>
			     	<div class="field">
	            		终到机场:{{ flight.endStation.stationName }}
			     	</div>
			     	<div class="field">
	            		起飞时间:{{ flight.startTime }}
			     	</div>
			     	<div class="field">
	            		终到时间:{{ flight.endTime }}
			     	</div>
			     	<div class="field">
	            		历时:{{ flight.totalTime }}
			     	</div>
			     	<div class="field">
	            		席别:{{ flight.seatType.seatTypeName }}
			     	</div>
			     	<div class="field">
	            		票价:{{ flight.price }}
			     	</div>
			     	<div class="field">
	            		总票数:{{ flight.seatNumber }}
			     	</div>
			     	<div class="field">
	            		剩余票数:{{ flight.leftSeatNumber }}
			     	</div>
			        <a class="btn btn-primary top5" href="{% url 'Flight:frontShow' flight.flightId  %}">详情</a>
			        <a class="btn btn-primary top5" onclick="flightEdit('{{ flight.flightId }}');" style="display: none;">修改</a>
			        <a class="btn btn-primary top5" onclick="flightDelete('{{ flight.flightId }}');" style="display: none;">删除</a>
			     </div>
			</div>
			{% endfor %}

			<div class="row">
				<div class="col-md-12">
					<nav class="pull-left">
						<ul class="pagination">
							<li><a href="#" onclick="GoToPage({{ currentPage|add:-1 }},{{ totalPage }});" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
							{% for page in pageList %}
                                            {% if currentPage == page %}
						                        <li class="active"><a href="#"  onclick="GoToPage({{ page }},{{ totalPage }});">{{ page }}</a></li>
						                    {% else %}
                                                <li><a href="#"  onclick="GoToPage({{ page }},{{ totalPage }});">{{ page }}</a></li>
                                            {% endif %}
                                            {% endfor %}
						                    <li><a href="#" onclick="GoToPage({{ currentPage|add:1 }},{{ totalPage }});"><span aria-hidden="true">&raquo;</span></a></li>
						</ul>
					</nav>
					<div class="pull-right" style="line-height:75px;" >共有{{ recordNumber }}条记录，当前第{{ currentPage }}/{{ totalPage }} 页</div>
				</div>
			</div>
		</div>
	</div>

  </div>
</div>
<div id="flightEditDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" style="width:900px;" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><i class="fa fa-edit"></i>&nbsp;航班信息信息编辑</h4>
      </div>
      <div class="modal-body" style="height:450px; overflow: scroll;">
      	<form class="form-horizontal" name="flightEditForm" id="flightEditForm" enctype="multipart/form-data" method="post"  class="mar_t15">
		    {% csrf_token %}
		  <div class="form-group">
			 <label for="flight_flightId_edit" class="col-md-3 text-right">记录编号:</label>
			 <div class="col-md-9"> 
			 	<input type="text" id="flight_flightId_edit" name="flight.flightId" class="form-control" placeholder="请输入记录编号" readOnly>
			 </div>
		  </div> 
		  <div class="form-group">
		  	 <label for="flight_flightNumber_edit" class="col-md-3 text-right">航班号:</label>
		  	 <div class="col-md-9">
			    <input type="text" id="flight_flightNumber_edit" name="flight.flightNumber" class="form-control" placeholder="请输入航班号">
			 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_flightPhoto_edit" class="col-md-3 text-right">航班图片:</label>
		  	 <div class="col-md-9">
			    <img  class="img-responsive" id="flight_flightPhotoImg" border="0px"/><br/>
			    <input id="flight_flightPhoto" name="flight.flightPhoto" type="file" size="50" />
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_startStation_stationId_edit" class="col-md-3 text-right">始发机场:</label>
		  	 <div class="col-md-9">
			    <select id="flight_startStation_stationId_edit" name="flight.startStation.stationId" class="form-control">
                    {% for stationInfo in stationInfos %}
                        <option value="{{ stationInfo.stationId }}">{{ stationInfo.stationName }}</option>
                    {% endfor %}
			    </select>
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_endStation_stationId_edit" class="col-md-3 text-right">终到机场:</label>
		  	 <div class="col-md-9">
			    <select id="flight_endStation_stationId_edit" name="flight.endStation.stationId" class="form-control">
                    {% for stationInfo in stationInfos %}
                        <option value="{{ stationInfo.stationId }}">{{ stationInfo.stationName }}</option>
                    {% endfor %}
			    </select>
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_startTime_edit" class="col-md-3 text-right">起飞时间:</label>
		  	 <div class="col-md-9">
                <div class="input-group date flight_startTime_edit col-md-12" data-link-field="flight_startTime_edit">
                    <input class="form-control" id="flight_startTime_edit" name="flight.startTime" size="16" type="text" value="" placeholder="请选择起飞时间" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_endTime_edit" class="col-md-3 text-right">终到时间:</label>
		  	 <div class="col-md-9">
                <div class="input-group date flight_endTime_edit col-md-12" data-link-field="flight_endTime_edit">
                    <input class="form-control" id="flight_endTime_edit" name="flight.endTime" size="16" type="text" value="" placeholder="请选择终到时间" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_totalTime_edit" class="col-md-3 text-right">历时:</label>
		  	 <div class="col-md-9">
			    <input type="text" id="flight_totalTime_edit" name="flight.totalTime" class="form-control" placeholder="请输入历时">
			 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_seatType_seatTypeId_edit" class="col-md-3 text-right">席别:</label>
		  	 <div class="col-md-9">
			    <select id="flight_seatType_seatTypeId_edit" name="flight.seatType.seatTypeId" class="form-control">
                    {% for seatType in seatTypes %}
                        <option value="{{ seatType.seatTypeId }}">{{ seatType.seatTypeName }}</option>
                    {% endfor %}
			    </select>
		  	 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_price_edit" class="col-md-3 text-right">票价:</label>
		  	 <div class="col-md-9">
			    <input type="text" id="flight_price_edit" name="flight.price" class="form-control" placeholder="请输入票价">
			 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_seatNumber_edit" class="col-md-3 text-right">总票数:</label>
		  	 <div class="col-md-9">
			    <input type="text" id="flight_seatNumber_edit" name="flight.seatNumber" class="form-control" placeholder="请输入总票数">
			 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_leftSeatNumber_edit" class="col-md-3 text-right">剩余票数:</label>
		  	 <div class="col-md-9">
			    <input type="text" id="flight_leftSeatNumber_edit" name="flight.leftSeatNumber" class="form-control" placeholder="请输入剩余票数">
			 </div>
		  </div>
		  <div class="form-group">
		  	 <label for="flight_flightDesc_edit" class="col-md-3 text-right">航班描述:</label>
		  	 <div class="col-md-9">
			 	<textarea name="flight.flightDesc" id="flight_flightDesc_edit" style="width:100%;height:400px;"></textarea>
			 </div>
		  </div>
		</form> 
	    <style>#flightEditForm .form-group {margin-bottom:5px;}  </style>
      </div>
      <div class="modal-footer"> 
      	<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      	<button type="button" class="btn btn-primary" onclick="ajaxFlightModify();">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% include 'footer.html' %}
<script src="{% static 'plugins/jquery.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap.js' %}"></script>
<script src="{% static 'plugins/wow.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'plugins/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jsdate.js' %}"></script>
<script src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
<script>
//实例化航班描述编辑器
    tinyMCE.init({
        selector: "#flight_flightDesc_edit",
        theme: 'advanced',
        language: "zh",
        strict_loading_mode: 1,
    });
/*跳转到查询结果的某页*/
function GoToPage(currentPage,totalPage) {
    if(currentPage==0) return;
    if(currentPage>totalPage) return;
    document.flightQueryForm.currentPage.value = currentPage;
    document.flightQueryForm.submit();
}

/*可以直接跳转到某页*/
function changepage(totalPage)
{
    var pageValue=document.flightQueryForm.pageValue.value;
    if(pageValue>totalPage) {
        alert('你输入的页码超出了总页数!');
        return ;
    }
    document.flightQueryForm.currentPage.value = pageValue;
    documentflightQueryForm.submit();
}

/*弹出修改航班信息界面并初始化数据*/
function flightEdit(flightId) {
	$.ajax({
		url :  '/Flight/update/' + flightId,
		type : "get",
		dataType: "json",
		success : function (flight, response, status) {
			if (flight) {
				$("#flight_flightId_edit").val(flight.flightId);
				$("#flight_flightNumber_edit").val(flight.flightNumber);
				$("#flight_flightPhotoImg").attr("src", flight.flightPhoto);
				$.ajax({
					url: "{% url 'StationInfo:listAll' %}",
					type: "get",
					success: function(stationInfos,response,status) { 
						$("#flight_startStation_stationId_edit").empty();
						var html="";
		        		$(stationInfos).each(function(i,stationInfo){
		        			html += "<option value='" + stationInfo.stationId + "'>" + stationInfo.stationName + "</option>";
		        		});
		        		$("#flight_startStation_stationId_edit").html(html);
		        		$("#flight_startStation_stationId_edit").val(flight.startStationPri);
					}
				});
				$.ajax({
					url: "{% url 'StationInfo:listAll' %}",
					type: "get",
					success: function(stationInfos,response,status) { 
						$("#flight_endStation_stationId_edit").empty();
						var html="";
		        		$(stationInfos).each(function(i,stationInfo){
		        			html += "<option value='" + stationInfo.stationId + "'>" + stationInfo.stationName + "</option>";
		        		});
		        		$("#flight_endStation_stationId_edit").html(html);
		        		$("#flight_endStation_stationId_edit").val(flight.endStationPri);
					}
				});
				$("#flight_startTime_edit").val(flight.startTime);
				$("#flight_endTime_edit").val(flight.endTime);
				$("#flight_totalTime_edit").val(flight.totalTime);
				$.ajax({
					url: "{% url 'SeatType:listAll' %}",
					type: "get",
					success: function(seatTypes,response,status) { 
						$("#flight_seatType_seatTypeId_edit").empty();
						var html="";
		        		$(seatTypes).each(function(i,seatType){
		        			html += "<option value='" + seatType.seatTypeId + "'>" + seatType.seatTypeName + "</option>";
		        		});
		        		$("#flight_seatType_seatTypeId_edit").html(html);
		        		$("#flight_seatType_seatTypeId_edit").val(flight.seatTypePri);
					}
				});
				$("#flight_price_edit").val(flight.price);
				$("#flight_seatNumber_edit").val(flight.seatNumber);
				$("#flight_leftSeatNumber_edit").val(flight.leftSeatNumber);
                tinyMCE.editors['flight_flightDesc_edit'].setContent(flight.flightDesc);
				$('#flightEditDialog').modal('show');
			} else {
				alert("获取信息失败！");
			}
		}
	});
}

/*删除航班信息信息*/
function flightDelete(flightId) {
    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
	if(confirm("确认删除这个记录")) {
		$.ajax({
			type : "POST",
			url : "/Flight/deletes",
			data : {
				flightIds : flightId,
                "csrfmiddlewaretoken": csrf
			},
			success : function (obj) {
				if (obj.success) {
					alert("删除成功");
					$("#flightQueryForm").submit();
					//location.href= basePath + "Flight/frontlist";
				}
				else 
					alert(obj.message);
			},
		});
	}
}

/*ajax方式提交航班信息信息表单给服务器端修改*/
function ajaxFlightModify() {
    $("#flight_flightDesc_edit").text(tinyMCE.editors['flight_flightDesc_edit'].getContent());
	$.ajax({
		url :   '/Flight/update/' + $("#flight_flightId_edit").val(),
		type : "post",
		dataType: "json",
		data: new FormData($("#flightEditForm")[0]),
		success : function (obj, response, status) {
            if(obj.success){
                alert("信息修改成功！");
                $("#flightQueryForm").submit();
            }else{
                alert(obj.message);
            } 
		},
		processData: false,
		contentType: false,
	});
}

$(function(){
	/*小屏幕导航点击关闭菜单*/
    $('.navbar-collapse a').click(function(){
        $('.navbar-collapse').collapse('hide');
    });
    new WOW().init();

    /*起飞时间组件*/
    $('.flight_startTime_edit').datetimepicker({
    	language:  'zh-CN',  //语言
    	format: 'yyyy-mm-dd hh:ii:ss',
    	weekStart: 1,
    	todayBtn:  1,
    	autoclose: 1,
    	minuteStep: 1,
    	todayHighlight: 1,
    	startView: 2,
    	forceParse: 0
    });
    /*终到时间组件*/
    $('.flight_endTime_edit').datetimepicker({
    	language:  'zh-CN',  //语言
    	format: 'yyyy-mm-dd hh:ii:ss',
    	weekStart: 1,
    	todayBtn:  1,
    	autoclose: 1,
    	minuteStep: 1,
    	todayHighlight: 1,
    	startView: 2,
    	forceParse: 0
    });
})
</script>
</body>
</html>

